 // 获取 canvas 元素和其上下文
    var can=document.getElementById('canvas');
    var ctx=can.getContext('2d');

    // 设置 canvas 的宽度和高度为浏览器窗口大小
    var w=can.width=window.innerWidth;
    var h=can.height=window.innerHeight;

    var count=1;  // 控制流星数量
    var drops=[];  // 存储所有流星对象

    // 当窗口大小发生变化时，更新 canvas 尺寸
    window.onresize=function() {
      w=can.width=window.innerWidth;
      h=can.height=window.innerHeight;
    };

    // 流星的构造函数
    function Drop() {};
    Drop.prototype={
      // 初始化流星的属性
      init: function() {
        // 随机初始化流星位置、速度、透明度等属性
        this.x=random(0,w);  // x 坐标
        this.y=0;  // y 坐标从顶部开始
        this.r=1;  // 初始半径
        this.color='white';  // 默认颜色为白色
        this.vy=random(1,2);  // y 轴速度
        this.vr=1;  // 半径增长速度
        this.a=1;  // 初始透明度
        this.va=0.96;  // 每次透明度衰减的比例
        this.l=random(h*0.9,h*0.9);  // 流星消失的 y 轴位置
      },
      // 绘制爆炸流星
      draw: function() {
        if(this.y>this.l) {
          // 在流星未达到目标高度时，绘制圆形流星
          ctx.beginPath();
          ctx.arc(this.x,this.y,this.r/2,0,2*Math.PI,false); //爆炸流星大小
          ctx.strokeStyle='rgba(255,255,255,'+this.a+')';  // 使用带透明度的流星颜色
          ctx.stroke();
        } else {
          // 在流星达到目标位置后，绘制矩形流星
          ctx.fillStyle=color(this.a);  // 根据透明度调整颜色
          ctx.fillRect(this.x,this.y,2,5);  // 绘制矩形
        }
        this.update();  // 更新流星位置和状态
      },
      // 更新流星的状态
      update: function() {
        if(this.y<this.l) {
          // 如果流星还没有到达目标位置，继续下落
          this.y+=this.vy;
        } else {
          // 如果流星到达目标位置，变大并逐渐消失、、从小到大再到透明消失处理
          if(this.a>0.03) {
            this.r+=this.vr;  // 增大流星的半径
            console.log(this.r)
            if(this.r>50) {
              this.a*=this.va;  // 衰减流星的透明度
              console.log(this.a )
            }
          } else {
            // 如果透明度小于 0.03，重新初始化流星
            this.init();
          }
        }
      }
    };

    // 每一帧的动画处理函数
    function move() {
      // 在每一帧清除画布内容，创造流星运动的效果
      ctx.fillStyle='rgba(0,0,0,.1)';
      ctx.fillRect(0,0,w,h);  // 轻微的黑色透明背景，使流星看起来像在夜空中运动
      for(var i=0;i<drops.length;i++) {
        drops[i].draw();  // 绘制每一个流星
      }
      // 请求下一帧动画，实现流星效果的不断循环
      requestAnimationFrame(move);
    };

    // 初始化流星对象并添加到流星数组中
    function setup() {
      for(var i=0;i<count;i++) {
        (function(j) {
          setTimeout(function() {
            var drop=new Drop();  // 创建一个新的流星对象
            drop.init();  // 初始化流星
            drops.push(drop);  // 添加到流星数组中
          },j*200);  // 设置流星出现的间隔
        }(i))  // 将当前索引传入闭包
      }
    };

    // 随机生成指定范围内的数值
    function random(min,max) {
      return Math.random()*(max-min)+min;
    };

    // 生成随机颜色，返回 rgba 格式的颜色值
    function color(a) {
      var r=255 //Math.floor(Math.random()*255);
      var g=255//Math.floor(Math.random()*255);
      var b=255//Math.floor(Math.random()*255);
      return 'rgba('+r+','+g+','+b+','+a+')';  // 生成随机的 RGB 颜色值，并结合透明度 a
    };

    // 启动流星雨效果
    setup();
    move();